<template>
  <div class="product-detail">
    <div v-if="product" class="product-container">
      <img :src="product.image" alt="宠物商品" class="product-image">
      <div class="product-info">
        <h2>{{ product.name }}</h2>
        <p>适用宠物: {{ product.petType === 'cat' ? '猫咪' : '狗狗' }}</p>
        <p>商品类型: {{ getProductTypeName(product.productType) }}</p>
        <p>{{ product.description }}</p>
        <p class="price">¥{{ product.price }}</p>
        <div class="quantity-selector">
          <button @click="decreaseQuantity">-</button>
          <span>{{ quantity }}</span>
          <button @click="increaseQuantity">+</button>
        </div>
        <button 
          @click="addToCart" 
          :disabled="!isLoggedIn"
          :title="!isLoggedIn ? '请先注册登录宠物商城' : ''"
          class="add-to-cart-btn"
        >加入购物车</button>
        <router-link to="/" class="back-link">返回首页</router-link>
      </div>
    </div>
    <div v-else>
      <p>商品不存在</p>
      <router-link to="/">返回首页</router-link>
    </div>
  </div>
</template>

<script>
// 从 vue 库中导入 ref、onMounted 和 computed 函数
import { ref, onMounted, computed } from 'vue';
// 从 vue-router 库中导入 useRoute 函数，用于获取当前路由信息
import { useRoute } from 'vue-router';
// 导入商品数据
import allProducts from '../products.js';

export default {
  name: 'Product',
  setup() {
    const route = useRoute(); // 获取当前路由信息
    const product = ref(null); // 使用 ref 创建一个响应式变量 product，初始值为 null
    const quantity = ref(1);// 使用 ref 创建一个响应式变量 quantity，初始值为 1
    const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true');
// 使用 computed 创建一个计算属性 getProductTypeName，返回一个函数用于将商品类型转换为中文名称
    const getProductTypeName = computed(() => {
      return (productType) => {
        switch (productType) {
          case 'food':
            return '宠物食品';
          case 'toy':
            return '宠物玩具';
          case 'accessory':
            return '宠物用品';
          default:
            return '';
        }
      };
    });

    // 根据路由参数获取商品
    onMounted(() => {
      const productId = parseInt(route.params.id);
      product.value = allProducts.find(p => p.id === productId);
    });

    // 增加数量
    const increaseQuantity = () => {
      quantity.value++;
    };

    // 减少数量，数量不能小于 1
    const decreaseQuantity = () => {
      if (quantity.value > 1) {
        quantity.value--;
      }
    };

    // 添加商品到购物车
    const addToCart = () => {
      if (!isLoggedIn.value) {
        alert('请先登录！');
        return;
      }
      if (!product.value) return;
// 从 localStorage 中获取购物车数据，如果不存在则返回空数组
      const cart = JSON.parse(localStorage.getItem('cart') || '[]');
       // 查找购物车中是否已存在该商品
      const existingProduct = cart.find(item => item.id === product.value.id);

      if (existingProduct) {
         // 如果商品已存在，增加商品数量
        existingProduct.quantity += quantity.value;
      } else { // 如果商品不存在，将商品添加到购物车中
        cart.push({ ...product.value, quantity: quantity.value });
      }
 // 将更新后的购物车数据存储到 localStorage 中
      localStorage.setItem('cart', JSON.stringify(cart));
        // 触发 storage 事件，通知其他组件购物车数据已更新
      window.dispatchEvent(new Event('storage'));
      alert('商品已添加到购物车！');
    };
 // 将需要在模板中使用的变量和方法返回
    return {
      product,
      quantity,
      increaseQuantity,
      decreaseQuantity,
      addToCart,
      isLoggedIn,
      getProductTypeName
    };
  }
};
</script>

<style scoped>
.product-detail {
  text-align: left;
  padding: 20px;
}
/* 商品容器样式，使用 flex 布局，元素间间距为 30px，顶部边距为 20px */
.product-container {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.product-image {
  width: 500px;
  height: 500px;
  object-fit: contain;
  background-color: #f5f5f5;
  padding: 30px;
  border-radius: 15px;
  transition: transform 0.3s ease;
}
/* 商品图片悬停样式，放大 1.02 倍 */
.product-image:hover {
  transform: scale(1.02);
}

.product-info {
  flex: 1;
}

.product-info h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
}
/* 商品信息段落样式，上下边距为 10px，文字颜色为灰色 */
.product-info p {
  margin: 10px 0;
  color: #666;
}
/* 商品价格样式，字体加粗，颜色为红色，字体大小为 24px，上下边距为 20px */
.price {
  font-weight: bold;
  color: #f44336;
  font-size: 24px;
  margin: 20px 0;
}
/* 数量选择器样式，使用 flex 布局，垂直居中对齐，上下边距为 20px */
.quantity-selector {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
/* 数量选择器中间的数量显示样式，左右边距为 15px，字体大小为 18px */
.quantity-selector span {
  margin: 0 15px;
  font-size: 18px;
}

.add-to-cart-btn {
  background: #B784B7;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 15px;
  transition: background 0.3s;
}

.add-to-cart-btn:hover {
  background: #9B6B9B;
}
/* 加入购物车按钮禁用样式，背景颜色为灰色，鼠标指针为禁止状态 */
.add-to-cart-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.back-link {
  color: #B784B7;
  text-decoration: none;
  margin-left: 15px;
}
/* 返回首页链接样式，文字颜色为紫色，无下划线，左边距为 15px，鼠标悬停时显示下划线 */
.back-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .product-container {
    flex-direction: column;
  }

  .product-image {
    width: 100%;
    height: 300px;
    padding: 20px;
  }
}
</style>